---
title: Perplexity Clone
description: Dark theme with cyan accents for a Perplexity look and feel
---

import { Perplexity } from "@/components/example/perplexity/Perplexity";
import { DocsRuntimeProvider } from "@/app/(home)/DocsRuntimeProvider";

## Live Demo

<div className="not-prose h-[700px]">
  <DocsRuntimeProvider>
    <Perplexity />
  </DocsRuntimeProvider>
</div>

## Overview

The Perplexity Clone example demonstrates how to customize assistant-ui to match Perplexity's interface. This includes their distinctive dark theme with cyan accents, search-focused design, and clean approach to AI responses.

## Features

- **Perplexity Styling**: Dark theme with cyan accent colors
- **Search Interface**: Search-focused input design with prominent search button
- **Clean Layout**: Perplexity's clean, information-dense design
- **Responsive Design**: Mobile-optimized interface
- **Dark Mode**: Forced dark theme for consistent appearance

## Usage

To create a Perplexity-style interface:

1. **Color Palette**: Dark backgrounds (#1a1a1a, #242424) with cyan accents (#20b8cd)
2. **Search Design**: Prominent search input with clear visual hierarchy
3. **Dark Theme**: Use `dark` class to force dark mode styling
4. **Layout Structure**: Clean, information-dense layout design

## Code

Key design elements for Perplexity clone:

- **Accent Cyan**: Perplexity's signature cyan (#20b8cd) for primary actions
- **Dark Surfaces**: Layered dark backgrounds for depth (#1a1a1a, #242424, #3a3a3a)
- **Search Focus**: Large, prominent search input field
- **Typography**: Clean, readable fonts optimized for information consumption
- **Spacing**: Balanced whitespace for readability

The implementation emphasizes information clarity and a consistent dark appearance while maintaining assistant-ui's core functionality.
